<template>
  <div style="display: flex">
    <div style="margin-right: 10px">
      <el-time-select
          v-model="startTime"
          :max-time="endTime"
          :placeholder="startPlaceholder"
          :start="startStart"
          :step="startStep"
          :end="startEnd"
          v-bind="$attrs.startOptions"
      />
    </div>
    <div>
      <el-time-select
          v-model="endTime"
          :min-time="startTime"
          :placeholder="endPlaceholder"
          :start="endStart"
          :step="endStep"
          :end="endEnd"
          :disabled="endTimeDisabled"
          v-bind="$attrs.endOptions"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, watch} from "vue";

let props = defineProps({
  startPlaceholder: {
    type: String,
    default: '请选择开始时间'
  },
  startStart: {
    type: String,
    default: '08:00'
  },
  startStep: {
    type: String,
    default: '00:30'
  },
  startEnd: {
    type: String,
    default: '24:00'
  },
  endPlaceholder: {
    type: String,
    default: '请选择结束时间'
  },
  endStart: {
    type: String,
    default: '08:00'
  },
  endStep: {
    type: String,
    default: '00:30'
  },
  endEnd: {
    type: String,
    default: '24:00'
  }
})

let startTime = ref<string>('')
let endTime = ref<string>('')
let endTimeDisabled = ref<boolean>(true)

let emits = defineEmits(['startChange', 'endChange'])

watch(() => startTime.value, value => {
  if (value === '') {
    endTime.value = ''
    endTimeDisabled.value = true
  }
  else {
    endTimeDisabled.value = false
    emits('startChange', value)
  }
})

watch(() => endTime.value, value => {
  if(value !== '') {
    emits('endChange', {
      startTime: startTime.value,
      endTime: value
    })
  }
})
</script>

<style scoped>

</style>